.msg-list {
  overflow: hidden;

  .msg-item {
    position: relative;
    width: 100%;
    min-height: 67px;
    //padding-left: 75px;
    box-sizing: border-box;
    display: flex;

    .swiper-item {
      position: relative;
      padding-left: 75px;
      box-sizing: border-box;
      width: 100%;
      z-index: 10;
      background-color: #fff;
      right: 0;

      &.top {
        background-color: #f1f1f2;
      }
    }

    .msg-item-left {
      position: absolute;
      width: 50px;
      height: 100%;
      left: 11px;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .avatar {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 100%;
      }
    }

    .msg-item-content {
      width: 100%;
      padding: 13px 11px 13px 0;
      box-sizing: border-box;

      .top-row, .bottom-row {
        display: flex;
        flex-direction: row;
        line-height: 21px;
      }

      .top-row {

        .target-name {
          font-size: 16px;
          color: #000;
          font-weight: 400;
          align-items: flex-start;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .msg-time {
          font-size: 12px;
          color: #909091;
        }
      }

      .bottom-row {

        .msg-content {
          font-size: 15px;
          color: #909091;
          align-items: flex-start;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .unread-count {
          min-width: 20px;
          height: 20px;
          //padding: 4px 6px;
          font-size: 12px;
          font-weight: 500;
          color: #fff;
          background-color: #a4d5ed;
          border-radius: 100%;
          text-align: center;
        }
      }

      &:after {
        content: " ";
        position: absolute;
        bottom: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #dedfe0;
        color: #dedfe0;
        transform-origin: 0 0;
        transform: scaleY(.5);
        left: 75px;
      }
    }

    .btn-group {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      z-index: 1;

      .fixtop, .delete {
        .swiper-btn-right;
      }

      .fixtop {
        background-color: #c7c7cb;
        right: 66px;
      }

      .delete {
        background-color: #eb4e3d;
      }
    }
  }
}

.swiper-btn-right() {
  height: 100%;
  padding: 0 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  text-align: center;
  line-height: 66px;
  float: left;
}
